<template>
  <div style="height:420px;width:100%;position:relative;">
      <div class="pagetop">
          <table>
              <tr>
                  <td>快速检索</td>
                  <td>
                      <el-input placeholder="文字结果或输入码" prefix-icon="el-icon-search" ref="refsearch" style="width:300px;" v-model="txtsearch"></el-input>
                  </td>
                  <td>
                      <el-button @click="btnok" icon="el-icon-circle-check">确定</el-button>
                  </td>
                  <td>
                      <el-button @click="cancel" icon="el-icon-circle-close">取消</el-button>
                  </td>
              </tr>
          </table>
      </div>
      <div class="pagecenter">
          <div class="middle-center">
              <vxe-grid :columns="tableColumn" :data="list" @cell-dblclick="vxselect" :loading="loading" ref="xTable1" border height="350px" highlight-current-row highlight-hover-row show-header-overflow="tooltip" show-overflow="tooltip" resizable size="mini" stripe @current-change="currentChangeEvent"></vxe-grid>
          </div>
      </div>
  </div>
</template>

<script type="text/javascript">
export default {
  props: { width: { type: String, default: "200px" }, value: [Number, String], datatype: { type: String }, rpt_itemcode: { type: String }, appendtobody: { type: Boolean, default: true }, dataname: { type: String }, resultkind: { type: String } },
  data() {
      return {
          txtsearch: "",
          loading: false,
          isFirstLoading: true,
          txtvalue: "",
          tableColumn: [],
          tableData: []
      };
  },
  watch: {
      txtsearch(val, oldval) {
          if (val != oldval) {
              this.isFirstLoading = true;
          }
      }
  },
  computed: {
      list() {
          if (this.txtsearch != "") {
              let rest = this.tableData;
              if (this.txtsearch != "") {
                  rest = rest.filter(item => item.textvalue.indexOf(this.txtsearch) > -1 || item.inputcode.toUpperCase().indexOf(this.txtsearch.toUpperCase()) > -1);
              }
              return rest;
          } else {
              return this.tableData;
          }
      }
  },
  created() {
      this.InitPageDate(); //初始化主列表
  },
  mounted() {
      this.$nextTick(() => {
          this.$refs.refsearch.focus();
      });
  },
  updated() {
      if (this.isFirstLoading) {
          this.$nextTick(() => {
              let currentrow = this.$refs.xTable1.getData(0);
              if (currentrow) {
                  this.isFirstLoading = false;
                  this.$refs.xTable1.setCurrentRow(currentrow);
              }
          });
      }
  },
  methods: {
      cancel() {
          this.$emit("cancel");
      },
      btnok() {
          this.$emit("change", this.txtvalue);
      },
      currentChangeEvent({ row }) {
          this.txtvalue = row.textvalue;
      },
      InitPageDate() {
          this.$tool
              .request({
                  url: "ucent/ddl",
                  method: "post",
                  data: {
                      action: "ItemTxtResult",
                      rpt_itemcode: this.rpt_itemcode,
                      resultkind: this.resultkind
                  }
              })
              .then(res => {
                  this.isFirstLoading = true;
                  this.tableColumn = res.Cols;
                  this.tableData = res.Data;
                  this.loading = false;
              })
              .catch(e => {
                  this.loading = false;
              });
      },
      vxselect({ row }) {
          this.$emit("change", row.textvalue);
      }
  }
};
</Script>

<style scoped>
.pagetop {
  width: 100%;
  height: 45px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 50px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}
</style>